<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" />
            <div class="title">
              <span class="title-text" style="font-weight: bold;">{{ title }}</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <div class="time-card">
          <flip-clock 
            :time="timeInfo.dateDay"
            :date="timeInfo.dateYear"
            :week="timeInfo.dateWeek"
          />
        </div>

        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <div>
              <dv-border-box-12>
                <daily-revenue />
              </dv-border-box-12>
            </div>
            <div>
              <main-content />
            </div>
            <div>
              <dv-border-box-13>
                <popular-site />
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第四行数据 -->
          <div class="bototm-box">
            <dv-border-box-13>
              <online-t-k-sell />
            </dv-border-box-13>
            <dv-border-box-13>
              <nearly7-days />
            </dv-border-box-13>
            <dv-border-box-12>
              <custom-route />
            </dv-border-box-12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
} from 'vue'
import { formatTime } from '@/utils'
import { WEEK } from '@/constant'
import useDraw from '@/utils/useDraw'
import { title, subtitle, moduleInfo } from '@/constant'
import DailyRevenue from '../dailyRevenue/index.vue'
import MainContent from '../mainContent/index.vue'
import PopularSite from '../popularSite/index.vue'
import OnlineTKSell from '../onlineTKSell/index.vue'
import Nearly7Days from '../nearly7Days/index.vue'
import CustomRoute from '../customRoute/index.vue'
import FlipClock from '@/components/FlipClock.vue'

export default defineComponent({
  components: {
    DailyRevenue,
    MainContent,
    PopularSite,
    OnlineTKSell,
    Nearly7Days,
    CustomRoute,
    FlipClock
  },
  setup() {
    // * 颜色
    const decorationColors = ['#568aea', '#000000']
    // * 加载标识
    const loading = ref<boolean>(true)
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: '',
      dateYear: '',
      dateWeek: ''
    })
    
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
    // 生命周期
    onMounted(() => {
      cancelLoading()
      initTime()
      // todo 屏幕适应
      windowDraw()
      calcRate()
    })

    onUnmounted(() => {
      unWindowDraw()
      clearInterval(timeInfo.setInterval)
    })

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    }

    // todo 处理时间监听
    const initTime = () => {
      // 立即执行一次时间更新
      const updateTime = () => {
        const date = new Date()
        timeInfo.dateDay = formatTime(date, 'HH:mm:ss')
        timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
        timeInfo.dateWeek = WEEK[date.getDay()] || WEEK[0]
      }
      
      updateTime() // 初始立即调用
      timeInfo.setInterval = setInterval(updateTime, 1000) // 后续定时更新
    }


    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';

.time-card {
  height: 2em;
  font-family: 'DS-Digital', sans-serif;
  color: white;
  border-radius: 8px;              // 更大圆角
  display: flex;
  align-items: center;
  gap: 8px;                        // 增加元素间距
  font-size: 1em;  // 增大数字字体
  margin: .5em 0;
}
</style>
